<template>
    <div class="detail-container">
        <el-card shadow="never" style="margin-top: 15px">
            <div class="operate-container">
                <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
                <span class="color-danger">当前状态：{{orderInfo.deliverStateStr}}</span>
                <div style="float:right;margin-top:16px;margin-right:20px;line-height: 22px" >
                    <el-button type="primary" @click="showPrint" size="small">打印</el-button>
                    <div style="font-size:12px">已打印 {{orderInfo.hasPrintNum}} 次</div>
                </div>

            </div>
            <el-form  size="mini" label-width="100px" style="margin-top:20px;" v-loading="loading">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="结算单号：">{{orderInfo.settlementNo}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="结算日期：">{{orderInfo.settlementDate}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="收款方：">{{orderInfo.receivingCustomerName}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="8">
                        <el-form-item label="收款方式：">{{orderInfo.payType |  fiferPayState}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="合计结算费用：">{{orderInfo.sumAmount}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="实际结算费用：">{{orderInfo.settlementAmount}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="付款日期：">{{orderInfo.payDate}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="付款人：">{{orderInfo.payUsername}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="付款凭证：">
                            <img v-for="item in orderInfo.files" :src="item" @click="fullImg(item)" style="width:80px;height:80px;cursor: pointer;object-fit: contain"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="付款备注：">{{orderInfo.payRemark}}</el-form-item>
                    </el-col>
                </el-row>

                <el-form-item :label="orderInfo.billType == 0 ? '发货单列表：': orderInfo.billType == 1 ? '入库单列表：' : '其它单据列表：'">
                    <div>共计<span style="padding:0 5px;color:red" v-if="orderInfo.deliverList">{{orderInfo.deliverList.length}}</span>条</div>
                    <div class="goodsList" style="margin-top:10px;">
                        <!--发货单-->
                        <el-table ref="sendTable"
                                  v-if="orderInfo.billType == 0"
                                  :data="orderInfo.deliverList"
                                  style="width: 100%;font-size: 12px"
                                  border>
                            <el-table-column label="发货单号"  align="center" width="150">
                                <template slot-scope="scope">{{scope.row.deliverSn}}</template>
                            </el-table-column>
                            <el-table-column label="发货日期"  align="center" width="120">
                                <template slot-scope="scope">{{scope.row.shipTime}}</template>
                            </el-table-column>
                            <el-table-column label="实际运费"  align="center">
                                <template slot-scope="scope">{{scope.row.actualFreight}}</template>
                            </el-table-column>
                          <el-table-column label="物流毛利"  align="center">
                            <template slot-scope="scope">{{scope.row.logisticsProfit}}</template>
                          </el-table-column>
                            <el-table-column label="司机运费"  align="center">
                                <template slot-scope="scope">{{scope.row.driverExpress}}</template>
                            </el-table-column>
                          <el-table-column label="运满满订单号"  align="center" width="100">
                            <template slot-scope="scope">{{scope.row.yunManManSn}}</template>
                          </el-table-column>
                            <el-table-column label="费用凭证"  align="center" width="300">
                                <template slot-scope="scope">
                                    <img :src="item" v-for="item in scope.row.costVoucher" style="width:30px;height:30px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                                </template>
                            </el-table-column>
                            <el-table-column label="客户名称" width="200">
                                <template slot-scope="scope">{{scope.row.customerName}}</template>
                            </el-table-column>
                            <el-table-column label="发货数量"  align="center">
                                <template slot-scope="scope">{{scope.row.shipNum}}</template>
                            </el-table-column>
                            <el-table-column label="收款人"  align="center">
                                <template slot-scope="scope">{{scope.row.payeeUsername}}</template>
                            </el-table-column>
                            <el-table-column label="费用备注"  width="300">
                                <template slot-scope="scope">{{scope.row.expressRemark}}</template>
                            </el-table-column>
                            <el-table-column label="到货凭证"  align="center"  width="300">
                                <template slot-scope="scope">
                                    <img :src="item" v-for="item in scope.row.goodsReceipt" style="width:30px;height:30px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                                </template>
                            </el-table-column>
                            <el-table-column label="到货备注"  width="300">
                                <template slot-scope="scope">{{scope.row.goodsReceiptRemark}}</template>
                            </el-table-column>
                            <el-table-column label="状态"  align="center">
                                <template slot-scope="scope">
                                    {{scope.row.settlementState==0 ? '未结算' :'已结算' }}
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--数据列表 入库单-->
                        <el-table
                                ref="sendTable"
                                v-if="orderInfo.billType == 1"
                                :data="orderInfo.deliverList"
                                border
                                style="width: 100%; margin-top: 20px">

                            <el-table-column
                                    align="center"
                                    label="单据类型"
                                    width="150">
                                <template slot-scope="scope">
                                    {{scope.row.billType}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="入库单号"
                                    width="150">
                                <template slot-scope="scope">
                                    {{scope.row.entrySn}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="运费"
                                    width="100"
                                    align="center">
                                <template slot-scope="scope">
                                    {{scope.row.freight}}
                                </template>
                            </el-table-column>
                          <el-table-column label="物流毛利"  align="center">
                            <template slot-scope="scope">{{scope.row.logisticsProfit}}</template>
                          </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="司机运费"
                                    width="100">
                                <template slot-scope="scope">
                                    {{scope.row.driverFreight}}
                                </template>
                            </el-table-column>
                          <el-table-column label="运满满订单号"  align="center" width="100">
                            <template slot-scope="scope">{{scope.row.yunManManSn}}</template>
                          </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="费用凭证"
                                    width="300">
                                <template slot-scope="scope">
                                    <img :src="item" v-for="item in scope.row.costVoucher" style="width:80px;height:80px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="入库日期"
                                    width="100">
                                <template slot-scope="scope">
                                    {{scope.row.entryTime}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="供应商名称"
                                    width="300"
                                    align="center">
                                <template slot-scope="scope">
                                    {{scope.row.supplierName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="fromCompany"
                                    label="合同公司"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    label="数量"
                                    width="100"
                                    align="center">
                                <template slot-scope="scope">
                                    {{scope.row.goodsNum}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="100"
                                    align="center"
                                    label="业务员">
                                <template slot-scope="scope">
                                    {{scope.row.userName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="收款人"
                                    width="100">
                                <template slot-scope="scope">
                                    {{scope.row.payeeUsername}}
                                </template>
                            </el-table-column>

                            <el-table-column
                                    align="center"
                                    label="报销状态"
                                    width="100">
                                <template slot-scope="scope">
                                    {{scope.row.isFreightSettled}}
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--数据列表 其它单据-->
                        <el-table
                                ref="sendTable"
                                v-if="orderInfo.billType == 2"
                                :data="orderInfo.deliverList"
                                border
                                style="width: 100%; margin-top: 20px">
                            <el-table-column
                                    align="center"
                                    label="单据类型"
                                    width="150">
                                <template slot-scope="scope">
                                    {{scope.row.billType}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="单据编号"
                                    width="150">
                                <template slot-scope="scope">
                                    {{scope.row.deliverSn}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="运费"
                                    width="100"
                                    align="center">
                                <template slot-scope="scope">
                                    {{scope.row.actualFreight}}
                                </template>
                            </el-table-column>
                          <el-table-column label="物流毛利"  align="center">
                            <template slot-scope="scope">{{scope.row.logisticsProfit}}</template>
                          </el-table-column>
                            <el-table-column
                                    width="100"
                                    align="center"
                                    label="司机运费">
                                <template slot-scope="scope">
                                    {{scope.row.driverExpress}}
                                </template>
                            </el-table-column>
                          <el-table-column label="运满满订单号"  align="center" width="100">
                            <template slot-scope="scope">{{scope.row.yunManManSn}}</template>
                          </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="费用凭证"
                                    width="300">
                                <template slot-scope="scope">
                                    <img :src="item" v-for="item in scope.row.costVoucher" style="width:80px;height:80px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="日期"
                                    width="100">
                                <template slot-scope="scope">
                                    {{scope.row.shipTime}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="供应商"
                                    width="150"
                                    align="center">
                                <template slot-scope="scope">
                                    {{scope.row.customerName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="entryType"
                                    label="出库类别"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    label="收款人"
                                    width="150"
                                    align="center">
                                <template slot-scope="scope">
                                    {{scope.row.payeeUsername}}
                                </template>
                            </el-table-column>

                            <el-table-column
                                    align="center"
                                    label="报销状态"
                                    width="100">
                                <template slot-scope="scope">
                                    {{scope.row.settlementState == 0 ? '未报销' : '已报销'}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form-item>
                <el-form-item label="备注">
                    {{orderInfo.remark}}
                </el-form-item>
            </el-form>

            <div style="text-align: center;margin-top:20px">
                <!--待财务确认-->
                <span v-if="orderInfo.settlementState == 20 && orderInfo.isNeedMyCheck == 1">
                    <el-button type="primary" @click="shenhe('financeCheck')" :loading="btnLoading" size="small">审核</el-button>
                    <el-button @click="showCancel" size="small">回退</el-button>
                </span>

              <!--待财务经理确认-->
              <span v-if="orderInfo.settlementState == 25 && orderInfo.isNeedMyCheck == 1">
                  <el-button type="primary" @click="shenhe('financeManagerCheck')" :loading="btnLoading" size="small">审核</el-button>
                  <el-button @click="showCancel" size="small">回退</el-button>
              </span>

                <!--待付款-->
                <span v-if="orderInfo.settlementState == 40">
                        <el-button @click="showSendForm" type="primary" size="small">付款</el-button>
                    </span>
                <el-button @click="delDate" size="small">取消</el-button>

            </div>
            <div style="margin-top: 20px;clear: both">
                <el-menu :default-active="logTab" class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1">操作记录</el-menu-item>
                </el-menu>
            </div>
            <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
                <div v-if="logTab == 1">
                    <el-timeline>
                        <el-timeline-item
                                v-for="(activity, index) in orderInfo.operateLogs"
                                :key="index">
                         <span>
                             <span style="padding-right:10px;">{{activity.createdAt}}</span>：{{activity.userName}} {{activity.content}}
                             <span v-show="activity.remark && activity.remark != ''" style="color:red;padding-left:5px">备注：{{activity.remark}}</span>
                         </span>
                        </el-timeline-item>
                    </el-timeline>
                    <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderInfo.operateLogs && orderInfo.operateLogs.length == 0">- 暂无数据 -</div>
                </div>

            </div>
        </el-card>



        <!--放大图片-->
        <el-dialog
                :visible.sync="dialogVisible4"
                width="800px">
            <img :src="fullSrc" style="width:100%;"/>
        </el-dialog>

        <!--付款-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="handleClose2"
                title="确认付款"
                :visible.sync="dialogVisible2"
                width="500px">
            <el-form :model="sendForm" size="mini" label-width="120px" ref="sendForm" :rules="rules2">
                <el-form-item label="付款日期：" prop="payDate">
                    <el-date-picker
                            value-format="yyyy-MM-dd"
                            v-model="sendForm.payDate"
                            style="width:140px"
                            type="date"
                            placeholder="付款日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="上传凭证：" prop="filesSrc">
                    <div style="width: 100%;height: 150px; border:1px solid #DCDFE6;cursor: default;border-radius: 4px;">
                        <img id="imgNode" :src="sendForm.filesSrc" style="width:100%;height:100%;object-fit: contain;border:0" v-show="sendForm.filesSrc">
                        <el-input type="hidden" v-model="sendForm.filesSrc"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="备注信息：">
                    <el-input type="textarea" v-model="sendForm.payRemark" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
        </el-dialog>

        <!--回退弹窗-->
        <el-dialog
                :close-on-click-modal="false"
                title="审核回退"
                :visible.sync="dialogVisible3"
                width="500px">
            <el-form :model="passForm" size="mini" label-width="100px" ref="passForm" :rules="rules3">
                <el-form-item label="备注信息：" prop="remark">
                    <el-input type="textarea" v-model="passForm.remark" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button  @click="dialogVisible3 = false">取消</el-button>
              <el-button @click="shenhe('back')" :loading="btnLoading3" type="primary">确定</el-button>
          </span>
        </el-dialog>

        <!--打印弹窗-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="closePrint"
                :visible.sync="dialogVisible6"
                width="900px">
            <div id="print-div" style="height:100%;background: #fff">
                <div class="title">运费报销</div>
                <div class="paper-top">
                    <table border="0" cellpadding="0" cellspacing="0" style="width:100%" class="pring-table">
                        <tr>
                            <td style=" white-space:nowrap;" valign="top" width="25%">申请编号：</td>
                            <td valign="top" width="25%">{{orderInfo.settlementNo}}</td>
                            <td style=" white-space:nowrap;" valign="top" width="25%">申请人：</td>
                            <td valign="top" width="25%">{{orderInfo.username}}</td>
                        </tr>
                        <tr>
                            <td style=" white-space:nowrap;" valign="top" width="25%">申请时间：</td>
                            <td valign="top" width="25%">{{orderInfo.createdAt}}</td>
                            <td style=" white-space:nowrap;" valign="top" width="25%">单据类型:</td>
                            <td  valign="top" width="25%">{{orderInfo.billTypeStr }}</td>
                        </tr>
                        <tr>
                            <td style=" white-space:nowrap;" valign="top" width="25%">报销金额：</td>
                            <td valign="top" width="25%">{{orderInfo.settlementAmount}}</td>
                            <td style=" white-space:nowrap;" valign="top" width="25%">报销人：</td>
                            <td valign="top" width="25%">{{orderInfo.receivingCustomerName}}</td>
                        </tr>
                        <tr>
                            <td style=" white-space:nowrap;" valign="top" width="25%">付款备注：</td>
                            <td valign="top" colspan="3">{{orderInfo.payRemark}}</td>
                        </tr>
                        <tr>
                            <td style=" white-space:nowrap;" valign="top" width="25%">备注：</td>
                            <td valign="top" colspan="3">{{orderInfo.remark}}</td>
                        </tr>
                    </table>
                </div>
                <div style="margin-top: 20px;clear: both">
                    <el-menu :default-active="logTab" class="el-menu-demo" mode="horizontal">
                        <el-menu-item index="1">操作记录</el-menu-item>
                    </el-menu>
                </div>
                <div style="margin-top:20px">
                    <el-timeline>
                        <el-timeline-item
                                v-for="(activity, index) in orderInfo.operateLogs"
                                :key="index">
                         <span>
                             <span style="padding-right:10px;">{{activity.createdAt}}</span>：{{activity.userName}} {{activity.content}}
                             <span v-show="activity.remark && activity.remark != ''" style="color:red;padding-left:5px">备注：{{activity.remark}}</span>
                         </span>
                        </el-timeline-item>
                    </el-timeline>
                    <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderInfo.operateLogs && orderInfo.operateLogs.length == 0">- 暂无数据 -</div>
                </div>

            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button type="primary" size="small" style="width:150px;" @click="printdiv">打印</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import store from '@/store'
    import {showSettlement,deleteSettlement,settlementProcess,settlementPay,getQiniuToken,uploadBase64,settlementUpdatePrintNum} from '@/api/partner'
    import {validateCommission} from '@/utils/validate';
    import "@/utils/jQuery.print"
    const defaultForm = {
        receivingCustomerName:'',
        settlementDate:'',
        payType:1,
        settlementAmount:'',
        sumAmount:'',
        deliverIds:[],
        remark:'',
        deliverIdstr:''
    };
    const defaultListQuery = {
        keywords:'',
        settlementState:0,
        pageNum: 1,
        pageSize: 10,
    }
    const defaultSendForm={
        settlementId: '',
        files: [],
        payRemark: '',
        payDate:'',
        filesSrc:null,
    };
    export default {
        name: "customerDetail",
        data(){
            const isvalidateCommission = (rule, value, callback) => {
                if (!validateCommission(parseFloat(value))) {
                    callback(new Error('非负整数或小数'))
                } else if(value > 99999999){
                    callback(new Error('最大值为99999999'))
                }else {
                    callback()
                }
            };
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                settlementId:this.$route.query.id,
                orderInfo:{},
                loading:true,
                dialogVisible4:false,
                fullSrc:'',
                btnLoading:false,
                dialogVisible2:false,
                btnLoading2:false,
                sendForm:JSON.parse(JSON.stringify(defaultSendForm)),
                uploadToken:{
                    token:'',
                },
                imgDomain:'',
                rules2:{
                    payDate:[{required: true, trigger: 'blur' ,message: '请输入付款日期',}],
                    filesSrc:[{required: true, trigger: 'change' ,message: '请上传付款凭证',}],
                },
                upUrl:'',

                btnLoading3:false,
                dialogVisible3:false,
                passForm:{
                    remark:'',
                },
                rules3:{
                    remark:[{required: true, trigger: 'blur' ,message: '请输入回退原因',}],
                },
                logTab:'1',
                dialogVisible6:false,
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
        },
        created() {
            this.getUploadToken();
            this.getPageInfo();
            this.pasteImage();
        },
        watch:{
            upUrl(){
              let data = {};
              let pic = this.upUrl.replace(/^.*?base64,/, '');
              data.pic = pic;
              data.token = this.uploadToken.token;
              data.imgDomain = this.imgDomain;
                uploadBase64(data).then((res)=>{
                  if(res.src){
                    this.sendForm.filesSrc = res.src;
                  }else{
                    this.$message.error('上传失败')
                  }
                });
            },
        },
        filters: {
            fiferPayState(val){
                if(val == 1){
                    return '银行汇款'
                }else if(val == 2){
                    return '现金'
                }else if(val == 3){
                    return '支付宝'
                }else if(val == 4){
                    return '微信'
                }
            },
            fiferType(val){
                if(val == 0){
                    return '发货单'
                }else if(val == 1){
                    return '入库单'
                }else if(val == 2){
                    return '其它单据'
                }
            },
        },
        methods:{

            //显示打印弹窗
            showPrint(){
                this.dialogVisible6 = true;
            },
            //关闭打印弹窗
            closePrint(){
                this.dialogVisible6 = false;
                this.getPageInfo()
            },

            //打印
            printdiv(){
                settlementUpdatePrintNum({settlementId:this.settlementId});
                $("#print-div").print({
                    globalStyles:true,//是否包含父文档的样式，默认为true
                    mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                    stylesheet:null,//外部样式表的URL地址，默认为null
                    noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
                    iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
                    append:null,//将内容添加到打印内容的后面
                    prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
                    deferred: $.Deferred()//回调函数
                });
            },
            //粘贴图片
            pasteImage() {
                let upUrl = ''
                document.addEventListener('paste',(event)=> {
                    let isChrome = false;
                    if (event.clipboardData || event.originalEvent) {
                        //某些chrome版本使用的是event.originalEvent
                        let clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                        if(clipboardData.items){
                            // for chrome
                            let  items = clipboardData.items, len = items.length, blob = null;
                            isChrome = true;
                            for (let i = 0; i < len; i++) {
                                if (items[i].type.indexOf("image") !== -1) {
                                    //getAsFile() 此方法只是living standard firefox ie11 并不支持
                                    blob = items[i].getAsFile();
                                }
                            }
                            if(blob!==null){
                                let blobUrl=URL.createObjectURL(blob);
                                // this.priceForm.blobImg = blobUrl;
                                // document.getElementById("imgNode").src=blobUrl;
                                let reader = new FileReader();
                                // base64码显示

                                reader.onload =  (event)=> {
                                    // event.target.result 即为图片的Base64编码字符串
                                    // this.priceForm.payContent = event.target.result;
                                    // document.getElementById("imgNode").src=base64_str;
                                    this.upUrl = event.target.result;
                                };
                                reader.readAsDataURL(blob);
                            }
                        }
                    }
                });
            },
            //获取七牛TOKEN
            getUploadToken(){
               return  getQiniuToken().then((res)=>{
                    this.uploadToken.token = res.token;
                    this.imgDomain = res.domain
                })
            },
            changeGoodsReceiptSrc(){
                this.sendForm.filesSrc = this.sendForm.files.join(",")
            },
            //上传图片
            handleAvatarSuccess(res){
                this.sendForm.files.push(this.imgDomain+res.key);
                this.changeGoodsReceiptSrc();
            },

            //删除图片
            delImg(index){
                this.sendForm.goodsReceipt.splice(index,1)
                this.changeGoodsReceiptSrc();
            },

            //显示收款
            showSendForm(){
              this.getUploadToken().then(()=>{
                this.sendForm.files = JSON.parse(JSON.stringify(this.orderInfo.files));
                this.sendForm.filesSrc = null;
                this.sendForm.payRemark = JSON.parse(JSON.stringify(this.orderInfo.payRemark));
                this.sendForm.payDate = JSON.parse(JSON.stringify(this.orderInfo.payDate));
                this.sendForm.settlementId = this.settlementId;
                this.dialogVisible2 = true;
                console.log(this.sendForm)
              })

            },
            //关闭收款
            handleClose2(){
                this.dialogVisible2 = false;
                this.$refs.sendForm.clearValidate();
            },

            //提交收款
            handleConfirm2(){
                this.$refs.sendForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading2 = true;
                        let data = JSON.parse(JSON.stringify(this.sendForm));
                        data.files = [];
                        data.files.push(data.filesSrc)
                        settlementPay(data).then(()=>{
                            this.btnLoading2 = false;
                            this.handleClose2();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading2 = false;
                        })
                    }
                })
            },

            //显示回退弹窗
            showCancel(){
                this.dialogVisible3 = true;
                this.passForm.remark = ''
            },

            //审核
            shenhe(type){
                let key;
                let data = {};
                data.settlementId= this.settlementId;
                data.action = type;
                if(type != 'back'){
                    key = 'btnLoading';
                    this[key] = true;
                    this.submitPass(data,key)
                }else{
                    key = 'btnLoading3';
                    data.remark = this.passForm.remark;
                    this.$refs.passForm.validate((valid) => {
                        if (valid) {
                            this[key] = true;
                            this.submitPass(data,key)
                        }
                    });
                }
            },

            submitPass(data,key){
                settlementProcess(data).then(()=>{
                    this.$message({
                        message: '操作成功！',
                        type: 'success'
                    });
                    this[key] = false;
                    this.dialogVisible3 = false;
                    this.getPageInfo()
                }).catch(()=>{
                    this[key] = false;
                })
            },


            goBlack(){
                this.$router.go(-1)
            },

            fullImg(src){
                this.dialogVisible4 = true;
                this.fullSrc = src;
            },

            //获取合同详情
            getPageInfo(){
                this.loading = true;
                showSettlement({settlementId:this.settlementId}).then(res=>{
                    this.orderInfo = res;
                    // if(this.orderInfo.billType != 0){
                    //     this.orderInfo.deliverList.forEach((el)=>{
                    //         // el.costVoucher = el.costVoucher != '' ? el.costVoucher.split(",") : [];
                    //         el.costVoucher = el.costVoucher.length>0 ? el.costVoucher: [];
                    //     })
                    // }
                    this.loading = false;
                });
            },

            //
            delDate(){
                this.$confirm('是否确定删除', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteSettlement({settlementId:this.settlementId,isDelete : 1}).then(()=>{
                        this.dialogVisible = false;
                        this.$router.push({name:'freightSettlement'})
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });

                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            }
        }
    }
</script>

<style  lang="scss">
    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
        .el-card__header{
            background: #f8f8f8;
            .kehu-name{
                display: inline-block;
                font-size:14px;
                vertical-align: middle;
            }
            .kehu-label{
                font-size:12px;
                vertical-align: middle;
                display: inline-block;
                margin-left:15px;
                color: #409eff;
                background: #ecf5ff;
                border: 1px solid #b3d8ff;
                height:24px;
                line-height: 24px;
                padding:0 10px;
                border-radius: 5px;
            }
            .kehu-info{
                text-align: right;
                font-size: 12px;
                color:#333;
                line-height: 20px;
                span{
                    padding-left:16px;
                }
            }
        }
        .operate-container {
            background: #F2F6FC;
            height: 80px;
            margin: -20px -20px 0;
            line-height: 80px;
        }
    }
    .price-block{
        font-size:12px;
        line-height:30px;
        .lab{
            display: inline-block;
            width:100px;
            text-align: right;
        }
        .text{
            display: inline-block;
        }
    }
    #print-div{
        font-size:12px;
        font-family: "Microsoft YaHei";
        color:#000;
        .title{
            font-size:24px;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
        }
        .paper-top{
            margin-top:20px;
            line-height: 30px;
        }
        .good-table{
            margin-top:20px;
            table{
                border-left:1px solid #000;
                border-bottom:1px solid #000;
                td,th{
                    font-weight: normal;
                    border-right:1px solid #000;
                    border-top:1px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                }
            }
        }
        .paper-bottom{
            margin-top:10px;
            line-height: 20px;
        }
        .pring-table{
            border-top:1px solid #000;
            border-right:1px solid #000;
            td{
                border-bottom:1px solid #000;
                border-left:1px solid #000;
                padding:0 10px;
            }
        }
    }
</style>
